<template>
    <div class="box">
        <div class="works-title">精选采集</div>
        <el-row type="flex" justify="space-around" style="align-items: center;">
            <el-col :span="10">
                <video src="../../src/assets/MP4/sp.mp4" controls poster="../../src/assets/images/banner.jpg"></video>
            </el-col>
            <el-col :span="10">
                <el-row type="flex" justify="space-around" style="align-items: center;">
                    <el-col :span="10" v-for="(item, index) in dataList" :key="index">
                        <el-card shadow="never" class="good-news">
                            <img :src="item.cover" alt="" @click="goWork(item.navId, item.depFirstId, item.desId, item.id)">
                        </el-card>
                        <span class="demonstration">{{item.title}}</span>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryInfo: {
                page: 1,  // 页数
                size: 2, // 条数
            },
            dataList: [],
            imgList: ['../../src/assets/images/light.jpg', '../../src/assets/images/humidifier.jpg']
        }
    },
    mounted() {
        this.getAllWorks()
    },
    methods: {
        getAllWorks() {
            this.$http.get(this.$api.allList,{params: this.queryInfo})
            .then(res => {
                if(res.data.status === 20000) {
                    console.log("首页");
                    this.dataList = res.data.data.records
                    console.log(this.dataList);
                }else {
                    console.log("首页失败");
                    this.$message.error(res.data.status)
                }
            })
            .catch(error => {
                console.log(error);
            })
        },
        goWork(navId, depFirstId, desId, Id) {
            this.$router.push({
                path: '/computer/branchdetail/workdetail',
                query: {
                    firstId: navId,
                    secondId: depFirstId,
                    desId: desId,
                    workId: Id
                }
            })
        },
    },
}
</script>

<style lang="less" scoped>
.box {
    margin-top: 17px;
    padding: 0 18px;
    padding-bottom: 20px;
    .works-title {
        text-align: start;
        font-size: 20px;
        padding: 20px 0;
    }
    video {
        width: 100%;
        // max-height: 274px;
        height: 100%;
    }
    .good-title {
        border-top: 2px solid #66b1ff;
        border-bottom: 1px solid #66b1ff;
        padding: 10px 0;
    }
    .good-news {
        padding: 0;
        img {
            width: 100%;
            height: 100%;
        }
        img:hover {
            transform: scale(1.05);
        }
    }
}
.box /deep/ .el-card__body {
    height: 100%;
    padding: 0;
}
</style>